<template>
	<swiper class="swiper" vertical :current="currentIndex" :duration="300" @change="onSwiperChange">
		<swiper-item v-for="(item, index) in videoList" :key="item.id">
			<view class="video-wrapper">
				<!-- 视频组件 -->
				<video
					muted
					:src="item.url"
					:id="`video-${index}`"
					:autoplay="currentIndex === index"
					class="video"
					object-fit="contain"
					@click="toggleVideo(index)"
					@play="onVideoPlay(index)"
					@pause="onVideoPause(index)"
				></video>
				<div v-show="!item.isPlay" class="play-icon" @click="toggleVideo(index)"></div>
				<!-- 界面交互元素（点赞、评论等） -->
				<view class="controls">
					<!-- 这里可以添加点赞、评论等按钮 -->
				</view>
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { recommendVideo } from '@/request/api.ts'
import palyImg from '@/assets/img/播放.png'
console.log(palyImg, 'palyImg')


const currentIndex = ref(0)
const videoList = ref([]) // 初始加载5个视频
const palyImg1 = ref(palyImg) // 初始加载5个视频
// 滑动切换事件
const onSwiperChange = (e) => {
	const newIndex = e.detail.current
	console.log(newIndex, 'newIndex')
	const oldVideoContext = uni.createVideoContext(`video-${currentIndex.value}`)
	oldVideoContext.pause()

	currentIndex.value = newIndex
	const newVideoContext = uni.createVideoContext(`video-${newIndex}`)
	newVideoContext.play()

	// 模拟无限加载：当滑动到倒数第三个时加载更多数据
	if (newIndex === videoList.value.length-1) {
		getList()
	}
}

// 加载更多视频
const loadMoreVideos = () => {
	// const newVideos = mockVideos(5)
	// videoList.value = [...videoList.value, ...newVideos]
}

// 视频播放状态处理
const onVideoPlay = (index) => {
	console.log(`视频 ${index} 开始播放`)
	videoList.value[index].isPlay = true
}

const onVideoPause = (index) => {
	console.log(`视频 ${index} 暂停播放`)
	videoList.value[index].isPlay = false
}

const palyFirstVideo = () => {
	currentIndex.value = 0
	const firstVideoContext = uni.createVideoContext('video-0')
	firstVideoContext.play()
}
// 切换暂停或播放
const toggleVideo = (index) => {
	console.log('videoList.value[index]', videoList.value[index].isPlay)
	const video = uni.createVideoContext(`video-${currentIndex.value}`)
	if (videoList.value[index].isPlay) {
		video.pause()
	} else {
		video.play()
	}
}

const getList = async () => {
	const list = await recommendVideo()
	list.forEach((item) => (item.isPlay = false))
	videoList.value = list
	palyFirstVideo()
}
getList()
</script>

<style scoped lang="scss">
.swiper {
	width: 100%;
	height: 100%;
}

.video-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}

.video {
	width: 100%;
	height: 100%;
}

.controls {
	position: absolute;
	bottom: 80rpx;
	right: 30rpx;
	z-index: 2;
}
.play-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	// background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	opacity: 0.8;
	transition: opacity 0.3s ease;
	&::after {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 55%;
		transform: translate(-50%, -50%);
		border-top: 20px solid transparent;
		border-bottom: 20px solid transparent;
		border-left: 30px solid white;
		opacity: 0.9;
	}
}
</style>
